@charset "utf-8";
@import "reset";

@function r($px) {
  @return $px/100 * 1rem;
}

/* @font-face :自定义引入外部字体库 */
@font-face {
  /* font-family :为引入字体库起名 */
  font-family: bluej029;
  /* src:对应字体库的文件路径 */
  src: url("../font/arial.ttf");
}
h3,
h4,
p,
span,
a,
li {
  font-family: bluej029;
}
.imgWrap img {
  width: 100%;
}

body section {
  position: absolute;
  .first {
    margin-bottom: r(72);
  }
  .second {
    margin-bottom: r(72);
  }
  .three {
    ul {
      display: flex;
      justify-content: space-between;
      li {
        width: 32.3%;
        .li-bottom {
          padding: 0px r(20);
          h3 {
            font-size: 19px;
            margin: r(20) 0px;
            line-height: 19px;
            height: 19px;
            color: #65636a;
            font-weight: bold;
          }
          p {
            padding-top: r(14);
            line-height: 50px;
            font-size: 18px;
            color: #b5b1b1;
          }
        }
      }
    }
  }
  .four {
   width: 100%;
    margin-top: r(60);
    position: relative;
    ul {
      position: relative;
      display: flex;
      justify-content: space-between;
      padding: r(0) r(120) ;
      overflow: hidden; 
      li {
        padding: r(100) r(0);
        position: relative;
        width: r(800);     
       //
        border-radius: 10px; 
        .bc{
          position: absolute;
          width: 200%;
          height: 100%;
          right: -142%; 
          bottom: 0;   
          background-color: red;
          z-index: -1;
          transform: skewX(-25deg) translateX(-30%);
        }
        form{
           background-color: white;
           padding: 0px r(70) r(64) r(70);
           box-shadow: 0px 0px 15px #d4d4d4;
        }
        h4 {
          font-size: 20px;
          line-height: 20px;
          color: #666564;
          font-weight: bold;
          padding: 6% 0px 3% 0px;
        }
        hr {
          height: 2px;
          background: #e4e1e1;
        }
        input {
          display: block;
          width: 100%;
          height: r(70);
          font-size: 24px;
          border: 1px solid #e4e1e1;
          border-radius: 5px;
          margin-bottom: r(72);
          padding-left: 20px;
          &::placeholder{
              color: red;
          }
        }

        p {
          font-size: 21px;
          line-height: 21px;
          padding-bottom: 1.5%;
          color: #b5b1b1;
        }
        .contain {
          position: relative;
          width: 100%;
          height: 50px;
          input[type="checkbox"] {
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 18px;
            position: absolute;
            left: r(10);
          }
          input[type="checkbox"]::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            width: 100%;
            height: 100%;
            border: 1px solid #e4e1e1;
          }
          input[type="checkbox"]:checked::before {
            content: "\2713";
            background-color: #fff;
            position: absolute;
            color: red;
            top: 0;
          }
          a {
            font-size: 20px;
            color: #c8b4ae;
            position: absolute;
            left: r(60);
            width: r(480);
          }
        }
        .but {
          margin-top: 34px;
          background-color: red;
          text-align: center;

          button {
            background-color: red;
            width: 100%;
            span {
              font-size: 24px;
              line-height: 68px;
              color: white;
            }
          }
        }      
      }
    }
  }
  .tip {
    padding: 20px 30px;
    font-size: 12px;
    width: 70%;
    background-color: #f8f8f8;
    height: r(800);
    overflow-y: auto;
    border-radius: 20px;
    position: fixed;
    bottom: 13%;
    left: 15%;
    z-index: -1;
    opacity: 0;
    display: block;
    transition: all 1s;
    ul {
      display: block;
      padding-top: 10px;
     
      li {
        font-size: 14px;
        padding-bottom: 10px;
      }
    }
    #close {
      margin-top: 20px;
      width: 100px;
      height: 35px;
      font-size: 12px;
      background-color: #e4e1e1;
      border-radius: 5px;
      margin-right: r(40);
    }
  }
}

@media (max-width: 1200px) {
  body section .three ul {
    display: block;
    li {
      width: 80%;
      margin: 0 auto;
    }
  }
  body section .four ul {
    background-color: transparent;
    display: block;
    li {
      width: 90%;
      margin: 0 auto;
      padding-bottom: r(50);
      margin-bottom: 20px;
    }
  }

  body section .four ul li .contain a {
    width: 80%;
    left: r(80);
  }

  .three ul li .li-bottom p {
    margin-bottom: r(30);
  }
  body section .four ul li .bc{
    background-color: transparent;
  }
  body section .tip {
    height: r(1200);
    bottom: 18%;
  }
}

  

